<template>
<div>

   <div class="top">
      <h1>人气TOP</h1>
      <p>
        人气第一
        <br />超越经典，一口惊艳
      </p>
      <dl>
        <dt>
          <img src="1.png" alt />
        </dt>
        <dd>经典拿铁</dd>
      </dl>
    </div>


  <div class="box" v-for="(v,i) in data" :key="i" @click="skip(v.coffee_id)" >
    <div class="box-left">
      <img :src="v.coffee_img1">
    </div>
    <div class="box-right">
      <ul>
        <li>{{v.coffee_name}}</li>
        <li class="box-right-m">
          <span class="box-right-m2">首杯价</span>
        </li>
        <li class="box-right-m">
          <div  class="box-right-m-left">
             <span class="box-right-m4">￥{{v.coffee_reality_price}}</span>
            <span class="box-right-m5">
              <!-- <span>{{typeof(data)}}</span> -->
            <div class="">￥{{v.coffee_original_price}}</div>
            </span>
          </div>
          <div class="right-add-bottom">+</div>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>

<script>
export default {
  mounted(){
    this.data = this.$store.state.menum.data
  },
  data() {
    return {
      data:null
    }
  },
  methods:{
    skip(id){
      this.$router.push({name:"details",query:{coffee_id:id}})
    }
  }
  
};
</script>

<style scoped>

.top {
  width: 2.75rem;
  margin: 0.14rem 0;
  /* border: 1px solid tomato; */
}
.top h1 {
  font-size: 0.14rem;
  margin: 0.02rem 0rem;
}
.top p {
  font-size: 0.1rem;
  color: gray;
}
.top dt {
  width: 2.75rem;
  height: 0.57rem;
  border: 1px solid palegreen;
  overflow: hidden;
}
.top img {
  display: block;
  width: 2.75rem;
  height: 0.57rem;
}
.top dd {
  margin: 0.07rem;
  font-size: 0.1rem;
  color: grey;
  font-style: italic;
}

.box {
  width: 2.75rem;
  height: 0.96rem;
  margin: 0.06rem 0;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid gray; */
}
.box-left {
  width: 0.96rem;
  height: 100%;
}
.box-left > img {
  display: block;
  width: 0.96rem;
  height: 0.96rem;
}
.box-right {
  width: 1.88rem;
  height: 100%;
}
.box-right ul {
  width: 100%;
  height: 100%;
  padding: 0.1rem 0rem 0.1rem 0.1rem;
}
.box-right ul li {
  width: 100%;
  height: 0.27rem;
  /* border: 1px solid tomato; */
  line-height: 0.27rem;
}
.box-right ul .box-right-m {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.box-right-m-left{
  flex: 1;
  display: flex;
  justify-content: flex-start;

}
.box-right ul .box-right-m2,
.box-right ul .box-right-m3 {
  margin: auto 0px;
  line-height: 0.18rem;
  display: block;
  height: 0.18rem;
  border: 1px solid orangered;
  border-radius: 0.02rem;
  color: orangered;
}
.box-right ul .box-right-m4 {
  font-size: 0.2rem;
  color: red;
}
.box-right ul .box-right-m5 {
  color: grey;
  font-size: 0.14rem;
}

.box-right ul li:nth-of-type(1) {
  font-size: 0.16rem;
  font-weight: bold;
}

.box-right ul li:nth-of-type(2) span {
  font-size: 0.14rem;
  margin-right: 0.05rem;
}
.box-right ul li:nth-of-type(3) span {
  /* font-size: 0.14rem; */
  margin-right: 0.05rem;
}
.right-add-bottom{
  width: 0.15rem;
  height: 0.15rem;
  background-color: rgb(0, 0, 180);
  color: #d3d2d2;
  border-radius: 50%;
  font-size: 0.15rem;
  line-height: 0.15rem;
  text-align: center;

}
</style>